<!--
 * @Author       : xiangmin
 * @File         : 用途
 * @Interface    : 接口文档
 * @Product      : 需求文档
 * @Date         : 2023-03-23 15:13:57
 * @LastEditors  : xiangmin
 * @LastEditTime : 2023-08-05 14:04:53
-->
<template>
	<c-page-header
		class="header-sticky"
		:page="{
			title: '富文本测试',
			subTitle: '这是一个测试page-header的',
			back: handleOpenDrawerClick
		}"
	>
		<template #extra>
			<a-space :size="20">
				<a>Link</a>
				<a>Link</a>
				<a>Link</a>
			</a-space>
		</template>

		<template #footer>
			<tab-nav
				:default-selected="2"
				:nav="nav"
				disabled
			></tab-nav>
		</template>
	</c-page-header>

	<a-card class="mt-10">
		<Toolbar
			style="border-bottom: 1px solid #ccc"
			:editor="editorRef"
			:defaultConfig="toolbarConfig"
			mode="default"
		/>
		<Editor
			style="height: 500px; overflow-y: hidden"
			v-model="valueHtml"
			:defaultConfig="editorConfig"
			mode="default"
			@onCreated="handleCreated"
		/>
	</a-card>

	<a-card
		v-loading="loading"
		loading-text="loading..."
	>
		{{ valueHtml }}
	</a-card>

	<div
		loading-text="loading..."
		v-loading="loading"
		class="h-400 bg-purple overflow-hidden"
		v-empty="empty"
		empty-image="https://med-fe.cdn.bcebos.com/lihui/wuneirong.png"
	></div>
	<a-space>
		<a-button @click="loading = !loading">v-loading</a-button>
		<a-button
			type="primary"
			@click="empty = !empty"
			>v-empty</a-button
		>
		<a-button
			type="primary"
			@click="handleOpenDrawerClick"
			>open drawer</a-button
		>
	</a-space>

	<testDrawer
		v-model="open"
		:maskClosable="true"
	/>
</template>

<script setup lang="ts">
import testDrawer from './testDrawer.vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const loading = ref(true)
const empty = ref(true)

const nav = [
	{ label: 'tab1', value: 1 },
	{ label: 'tab2', value: 2 },
	{ label: 'tab3', value: 3 }
]

const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
	setTimeout(() => {
		valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
	}, 1500)
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	editorRef.value?.destroy()
})

// 记录 editor 实例，重要！
const handleCreated = editor => {
	editorRef.value = editor
}

const open = ref(false)
const handleOpenDrawerClick = () => (open.value = true)
</script>
